<script setup>
import { computed, ref } from 'vue';

let familyName = ref("kevin")
let givenName = ref("abcque")

let total = computed(
    ()=>{
        console.log("call computed");
    
    return givenName.value + " " + familyName.value
    }
)


function fullName() {
    console.log("call function fullName()");
    
    return givenName.value + " " + familyName.value
}
</script>

<template>
<h2>{{ givenName }} {{ familyName }}</h2>
<h2>{{  fullName() }}</h2>
<!-- <h2>{{  fullName() }}</h2>
<h2>{{  fullName() }}</h2> -->
<!-- 计算属性具有缓存功能，在依赖变量不变的情况下，多次调用只执行一次。 -->
<h2>{{ total }}</h2>
<h2>{{ total }}</h2>
<h2>{{ total }}</h2>
</template>

<style>
</style>